<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ul,
    li {
        list-style: none;
    }
</style>

<body>
    <div id="app">
        <exampapers></exampapers>
    </div>
    <template id="Papers">
        <button @click="btn=true">开始答题</button>
        <div v-if="btn" v-for="(item,index) in obj">
            <h2 v-if="num === index">{{ item.questions }}</h2>
            <li v-for="(item,index) in item.answers" v-if="num === index" @click="num2 = index"
                :style="num2===index?{'color': 'red'}:{'color': 'blue'}">
                {{ item }}
            </li>
            <button @click="rem" v-if="num === index">上一题</button>
            <button v-if="num === index" @click="add">下一题</button>
        </div>
    </template>
</body>
<script src="./vue.js"></script>
<script type="module">
    const { createApp, ref } = Vue
    import ExamPapers from './zuoye2.js'
    const app = createApp({
        setup() {

        }
    })
    app.component('exampapers', ExamPapers)
    app.mount("#app")
</script>

</html>